<script setup>

  import api from "./api.js";
  import {Search} from "@element-plus/icons-vue";

  const { proxy } = getCurrentInstance();
  const { normal_cannot_status } = proxy.useDict("normal_cannot_status");
  const openFlag = ref(false);
  const table = ref();
  const tableData = reactive({
    loading: false,
    list: [],
    paging: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  });
  const queryParams = reactive({
    field: 'number',
    value: null
  });

  function open() {
    openFlag.value = true;
    getList();
  }

  function close() {
    openFlag.value = false;
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    tableData.paging.pageNum = 1;
    getList();
  }

  /** 查询资产清单表列表 */
  async function getList() {
    tableData.loading = true;
    const {pageNum, pageSize} = tableData.paging;
    const query = {...queryParams};
    const pageReq = {page: pageNum - 1, size: pageSize};
    api.list(query, pageReq).then(response => {
      const { content, totalElements } = response
      tableData.list = content;
      tableData.paging.total = totalElements;
      tableData.loading = false;

    }).catch(error => {
      tableData.loading = false;
      console.log(error);
    });
  }

  const emit = defineEmits(['sub'])

  function sub() {
    const selections = table.value.getCheckboxRecords();
    emit('sub', selections);
    close();
  }

  function showImg(img) {
    return import.meta.env.VITE_APP_BASE_API + img;
  }

  defineExpose({
    open
  })


</script>

<template>
  <div>
    <el-dialog ref="dialog" v-model="openFlag" title="选择库存" width="50%" append-to-body>

      <el-scrollbar max-height="65vh">
        <div class="ui_el_dialog_body">
          <el-form style="margin-bottom: 20px;">

            <el-input
                v-model="queryParams.value"
                style="max-width: 300px"
                placeholder="请输入"
            >
              <template #prepend>
                <el-select v-model="queryParams.field" placeholder="请选择" style="width: 80px">
                  <el-option label="编码" value="number" />
                  <el-option label="名称" value="name" />
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search" @click="sub" />
              </template>
            </el-input>


          </el-form>

          <vxe-table ref="table" :loading="tableData.loading" :data="tableData.list">
            <vxe-column type="checkbox"></vxe-column>
            <vxe-column width="120" field="number" title="图片" align="center">
              <template #default="scope">
                <vxe-tooltip v-if="scope.row.imgUrl" class="box-item" effect="dark" placement="right-start">
                  <template #content>
                    <img alt="" :src="showImg(scope.row.imgUrl)" width="100" height="100" />
                  </template>
                  <img alt="" :src="showImg(scope.row.imgUrl)" width="30" height="30" />
                </vxe-tooltip>
                <span v-else>没有图片</span>
              </template>
            </vxe-column>
            <vxe-column width="140" field="number" title="编码" align="center"/>
            <vxe-column width="140" field="name" title="名称" align="center"/>
            <vxe-column width="140" field="categoryName" title="分类" align="center"/>
            <vxe-column width="140" field="barcode" title="商品条码" align="center"/>
            <vxe-column width="140" field="brand" title="品牌" align="center"/>
            <vxe-column width="140" field="model" title="规格型号" align="center"/>
            <vxe-column width="140" field="price" title="单价" align="center"/>
            <vxe-column width="140" field="num" title="数量" align="center"/>
            <vxe-column width="140" field="batchNumber" title="批次号" align="center"/>
            <vxe-column width="140" field="warehouseName" title="仓库" align="center"/>
            <vxe-column width="140" field="totalPrice" title="总金额" align="center"/>
            <vxe-column width="140" field="useLimit" title="限领数量" align="center"/>
            <vxe-column title="操作" align="center" width="200" fixed="right">
              <template #default="{ row }">
                <el-button style="margin-right: 10px;" link type="primary" size="small" @click="handleDelete(row)">删除</el-button>
              </template>
            </vxe-column>
          </vxe-table>

          <pagination
              v-show="tableData.paging.total>0"
              :total="tableData.paging.total"
              :page.sync="tableData.paging.pageNum"
              :limit.sync="tableData.paging.pageSize"
              @pagination="getList"
          />
        </div>
      </el-scrollbar>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<style scoped lang="scss">

</style>